<template>

	<view class="content">
		<view class="topbig">
			<view class="topbox">

			</view>
			<view class="topbottom">

			</view>
			<view class="centerbox">
				<view class="center" v-if="!isLogin">
					<view class="usertop" @tap="tologin">
						<view class="imguser">
							<image src="../../static/xiaoyuan.png"></image>
						</view>
						<view class="textuser">
							<text class="username">未登录</text>
						</view>
					</view>
					<view class="userbottom">
					</view>
				</view>
				<view class="center" v-if="isLogin">
					<view class="usertop">
						<view class="imguser">
							<image :src="userInfo.avatarUrl"></image>
						</view>
						<view class="textuser">
							<text class="username">{{userInfo.nickName}}</text>
							<!-- <text class="userphone">{{mobile}}</text> -->
						</view>
					</view>
					<view class="userbottom">
						<view class="changebox" v-if="isLogin">
							<view @tap="tochange">
								<image src="../../static/change.png" mode=""></image>
							</view>
						</view>
						<!-- 老师端 -->
						<view class="userbottom1" v-if="index==1">
							<view class="daban">
								<text>{{text.name? text.name:showshujv.class.class_name}}</text>
							</view>
							<view class="daban">
								<text>的</text>
							</view>
							<view class="daban">
								<text>{{text.zhiwei?text.zhiwei:showshujv.zhiwei}}</text>
							</view>
							<view class="banzhuren" v-if="text.bzr==1 || showshujv.bzr==1">
								<text>班主任</text>
							</view>
						</view>
						<view class="userbottom2" v-if="index==1">
							<text>{{text.school? text.school:showshujv.school_name}}</text>
						</view>
						<!-- 家长端 -->
						<view class="userbottom1" v-if="index==0">
							<view class="daban">
								<text>{{showshujv.name}}</text>
							</view>
							<view class="daban">
								<text>的</text>
							</view>
							<view class="daban">
								<text v-if="showshujv.content">{{showshujv.content}}</text>
								<text v-else>{{text.content}}</text>
							</view>

						</view>
						<view class="userbottom2" v-if="index==0">
							<text>{{showshujv.school_name}}</text>
							<text style="margin-left: 6rpx;">{{showshujv.class_name}}</text>
						</view>
						<!-- 教育局端 -->
						<view class="userbottom1" v-if="index==2">
							<view class="daban">
								<text>{{showshujv.company_name}}</text>
							</view>
						</view>
						<view class="userbottom2" v-if="index==2">
							<text>{{showshujv.user_name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottombox">
			<!-- <view class="bottomcenter" @tap="myziliaoshow">
				<view class="myziliao">
					<image src="../../static/myziliao.png" mode=""></image>
					<text>我的资料</text>
				</view>
				<view class="jump">
					<image src="../../static/jiantou.png" mode=""></image>
				</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				index: 0,
				text: {},
				showshujv: {},
				id: 0,
				class_id: 0,
				company_id: 0,
				group_id: 0,
				status: ''

			}
		},
		methods: {
			tologin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			tochange() {
				uni.navigateTo({
					url: "../tochange/tochange"
				})
			},

			myziliaoshow() {

				uni.showModal({
					content: '尚未开发，敬请期待！',
					showCancel: false,
					cancelText: '',
					confirmText: '确认',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
				// uni.navigateTo({
				// 	url:"../myziliao/myziliao"
				// })
			},
			showshouyeshujv() {
				this.$store
					.dispatch('showshouyeshujv', {
						open_id: this.userInfo.openid,
						token: this.userInfo.token,
						id: this.id,
						index: this.index,
						company_id: this.company_id,
						group_id: this.group_id,
						status: this.status
					})
					.then(res => {
						this.showshujv = res.data.data
						if (this.index == 0) { //家长端
							this.class_id = res.data.data.class_id
							uni.setStorageSync("student_id", res.data.data.student_id)
							uni.setStorageSync("class_id", this.class_id)
						} else if (this.index == 1) { //教师端
							if (uni.getStorageSync("student_id")) {
								uni.removeStorageSync("student_id")
							}
							this.class_id = res.data.data.class.class_id
							uni.setStorageSync("class_id", this.class_id)

						}
					});
			}
			// getpay() {
			// 	if (this.isLogin) {
			// 		uni.navigateTo({
			// 			url: "../pay/pay"
			// 		})
			// 	} else {
			// 		uni.showModal({
			// 			title: '温馨提示',
			// 			content: '请先登录，再来付款',
			// 			showCancel: false,
			// 			cancelText: '',
			// 			confirmText: '确认',
			// 			success: res => {},
			// 			fail: () => {},
			// 			complete: () => {}
			// 		});
			// 	}

			// }
		},
		onLoad() {},
		onShow() {
			if (this.isLogin) {
				this.text = uni.getStorageSync("abc")
				this.index = uni.getStorageSync("def")
				if (this.text) {
					this.id = this.text.student_id ? this.text.student_id : this.text.class_id					
				}
				if (this.index == 2) {
					this.company_id = this.text.id ? this.text.id : this.userInfo.edu_res.id
					this.group_id = this.text.group_id ? this.text.group_id : this.userInfo.edu_res							
					this.status = this.text.status ? this.text.status : this.userInfo.edu_res.status
				}
				this.showshouyeshujv()
			}

		},
		onPullDownRefresh() {
			this.showshouyeshujv()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}

	}
</script>

<style lang="less">
	page {
		background-color: #f4f4f4;
	}

	.topbig {
		position: relative;

		.topbox {
			width: 100%;
			height: 400rpx;
			background-color: #0a98f7;
		}

		.topbottom {
			width: 100%;
			height: 150rpx;
			// background-color: pink;
			position: relative;
		}

		.centerbox {
			position: absolute;
			bottom: -30rpx;
			width: 100%;
			height: 400rpx;
			padding: 50rpx;
			box-sizing: border-box;

			.center {
				width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 15rpx;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.usertop {
					flex: 3;
					width: 100%;
					background-color: #fff;
					display: flex;
					align-items: center;
					box-sizing: border-box;

					.imguser {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 180rpx;
						height: 180rpx;


						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 50%;
							background-color: #ecf7fe;
						}
					}

					.textuser {
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						height: 100%;

						.username {
							font-size: 38rpx;
							font-weight: bold;
						}

						.userphone {
							font-size: 28rpx;
						}
					}
				}

				.userbottom {
					position: relative;
					padding: 20rpx;
					flex: 2;
					width: 100%;
					background-image: linear-gradient(#ecf7fe, #fff);
					display: flex;
					flex-direction: column;
					font-size: 26rpx;
					box-sizing: border-box;

					.userbottom1 {
						display: flex;

						.daban {
							// height: 28rpx;
							line-height: 28rpx;
							padding: 8rpx 0rpx;
						}

						.banzhuren {
							height: 28rpx;
							background-color: #0a98f7;
							line-height: 28rpx;
							padding: 8rpx 20rpx;
							margin-left: 20rpx;
							color: #fff;
							border-radius: 10rpx;
						}
					}

					.userbottom2 {
						color: #999;
						font: 26rpx;
					}

					.changebox {
						position: absolute;
						top: -25rpx;
						right: 70rpx;
						width: 50rpx;
						height: 50rpx;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

				}

			}

		}
	}

	.bottombox {
		padding: 5rpx 50rpx;
		width: 100%;
		height: 120rpx;
		// background-color: #0086B3;
		box-sizing: border-box;
		margin-top: 30rpx;

		.bottomcenter {
			width: 100%;
			height: 100%;
			background-color: #fff;
			border-radius: 15rpx;
			box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;

			.myziliao {
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 45rpx;
					margin-right: 15rpx;
				}

				text {
					font-size: 28rpx;
				}
			}

			.jump {


				image {
					width: 27rpx;
					height: 45rpx;
				}
			}


		}
	}
</style>
